<!-- subpkg_consult/department/index.vue -->
<script setup>
	import { computed, ref } from 'vue';
	import { getDepAllListAPI } from '../../apis/consult';
	
	// 获取所有科室列表
	const depAllList = ref([])
	const getDepAllList = async () => {
		const res = await getDepAllListAPI()
		console.log(res, 1111)
		depAllList.value = res.data
	}
	getDepAllList()
	
	// 点击切换一级科室
	const activeIndex = ref(0)
	const onChangeIndex = (index) => {
		activeIndex.value = index
	}
	
	// 通过计算属性获取二级科室
	const subDep = computed(() => {
		return depAllList.value[activeIndex.value]?.child
	})
	
	const props = defineProps({
		type: String,
		illnessType: String
	})
	
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view class="department-item"
			v-for="(item, index) in depAllList" 
			:key="item.id"
			@click="onChangeIndex(index)"
			:class="{active: activeIndex === index}"
	   >
		{{ item.name }}
	   </view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`"
        class="department-item"
		v-for="item in subDep"
		:key="item.id"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>